<template>
  <div class="userControl">
    <!--    搜索框内容-->
    <div class="filter-header">
      <div class="filter-header-bock">
        <span class="filter-header-bock-item">
          <label>用户名：</label>
          <el-input placeholder="请输入内容" style="width: 200px" v-model="searchUserName" size="small" />
        </span>
        <span class="filter-header-bock-item">
          <label>手机号码：</label>
          <el-input placeholder="请输入内容" style="width: 200px" type="number" v-model="searchPhoneNumber" size="small" />
        </span>
      </div>
      <div>
        <el-button color="#1ab394" class="search-button" size="small" @click="fnUserList(searchUserName,searchPhoneNumber)">查找</el-button>
        <el-button color="#f8ac59" class="search-button" size="small" @click="headleSearchReset">重置</el-button>
      </div>
    </div>
    <!--    主体内容-->
    <div class="userMain">
      <div>
        <el-button color="#1c84c6" size="mini" class="mainButton" @click="handleShowAdd">新增</el-button>
        <el-button color="#1ab394" size="mini" class="mainButton" :disabled="bjDisabled" @click="handleShowUpdate">修改</el-button>
        <el-button color="#ed5565" size="mini" class="mainButton" @click="fnUserDelete" :disabled="scDisabled">删除</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        v-loading="tableLoading"
        stripe
        style="width: 100%"
        size="mini"
        class="user-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="30" type="expand" fixed="left">
          <template #default="scope">
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">头像：</el-col>
              <el-col :span="11">
                <img class="table-column-avatar" :src="scope.row.avatar?'/file/'+scope.row.avatar:''" alt="">
              </el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">用户名：</el-col>
              <el-col :span="11">{{scope.row.uName}}</el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">昵称：</el-col>
              <el-col :span="11">{{scope.row.sign}}</el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">性别：</el-col>
              <el-col :span="11">{{SEX[scope.row.sex] || '--'}}</el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">账号状态：</el-col>
              <el-col :span="11">
                <el-tag :type="scope.row.status === 0 ? 'success' : scope.row.state === 1 ? 'danger' : 'info'" size="mini">
                  {{ACCOUNT_STATUS[scope.row.status] || ''}}
                </el-tag>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">手机号：</el-col>
              <el-col :span="11">{{scope.row.phone || '--'}}</el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">用户角色：</el-col>
              <el-col :span="11">
                <template v-for="item in scope.row.roles" :key="item.rId">
                  <el-tag size="mini">{{item.rName}}</el-tag>
                </template>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">邮箱：</el-col>
              <el-col :span="11">{{scope.row.email || '--'}}</el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">qq：</el-col>
              <el-col :span="11">{{scope.row.qq || '--'}}</el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">微信：</el-col>
              <el-col :span="11">{{scope.row.wx || '--'}}</el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">生日：</el-col>
              <el-col :span="11">{{timeForMat('','',scope.row.birthday)}}</el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">创建时间：</el-col>
              <el-col :span="11">{{timeForMat('','',scope.row.createTime)}}</el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">更新时间：</el-col>
              <el-col :span="11">{{timeForMat('','',scope.row.updateTime)}}</el-col>
            </el-row>
            <el-row :gutter="20" class="user-detail-item">
              <el-col :span="2" class="user-detail-item-head">备注：</el-col>
              <el-col :span="11">{{scope.row.remark || '--'}}</el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="40" fixed="left" />
        <el-table-column prop="uId" label="用户编号" width="140" />
        <el-table-column prop="uName" label="用户名" width="140" />
        <el-table-column prop="sign" label="昵称" width="140" />
        <el-table-column prop="password" label="密码" width="150" />
        <el-table-column prop="sex" label="性别" width="60" >
          <template #default="scope">
            {{SEX[scope.row.sex] ? SEX[scope.row.sex] : '--'}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="账号状态" width="80">
          <template #default="scope">
            {{ACCOUNT_STATUS[scope.row.status] ? ACCOUNT_STATUS[scope.row.status] : '--'}}
          </template>
        </el-table-column>
        <!--          <el-table-column prop="delFlag" label="删除标记">-->
        <!--            <template #default="scope">-->
        <!--              {{DEL_FLAG[scope.row.delFlag] ? DEL_FLAG[scope.row.delFlag] : '&#45;&#45;'}}-->
        <!--            </template>-->
        <!--          </el-table-column>-->
        <el-table-column :formatter="timeForMat" width="140" prop="createTime" label="创建时间" />
        <el-table-column :formatter="timeForMat" width="140" prop="updateTime" label="更新时间" />
        <el-table-column prop="remark" label="备注信息" />
      </el-table>
    </div>
    <!-- 新增和编辑用户弹出 -->
    <el-dialog
      v-model="dialogFormVisible"
      :title="dialogTitle"
      @close="handleClearValue"
      :close-on-click-modal="false"
      width="800px"
    >
      <el-form class="formPositon" :inline="true" label-width="120px">
        <el-row :gutter="20" justify="space-between">
          <!--        头像上传-->
          <el-col :span="12">
            <el-form-item label="用户头像" style="margin-right: 64px">
              <el-upload
                action="#"
                list-type="picture-card"
                :on-preview="handleShowBigImg"
                :auto-upload="false"
                :on-change='onChange'
                :limit="1"
                v-show="showUploadImg"
                :file-list='imgList'
              >
                <el-icon>
                  <plus />
                </el-icon>
              </el-upload>
              <div class="showFileImage" v-show="showFile">

                <img class="show-file-avatar" :src="avatar?'/file/'+avatar:''" alt="">
                <div class="icon-button-hover">
                  <span class="image-icon-button">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handleShowBigImg"
                    >
                      <el-icon color="#fff" class="icon-zoom-in">
                        <zoom-in />
                      </el-icon>
                    </span>
                    <span
                      class="el-upload-list__item-preview"
                      @click="handleRemoveImg()"
                    >
                      <el-icon class="icon-delete" color="#fff">
                        <delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </div>
              <el-dialog v-model="dialogVisible">
                <img class="show-big-img" :src="'/file/'+dialogImageUrl">
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名">
              <el-input v-model="uName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码">
              <el-input v-model="password" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-radio-group v-model="sex">
                <template :key="index" v-for="(item,index) in SEX">
                  <el-radio :label="index">{{ item }}</el-radio>
                </template>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input maxlength="11" v-model="phone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="email" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="qq号">
              <el-input v-model.number="qq" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信号">
              <el-input v-model="wx" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签名">
              <el-input v-model="sign" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注信息">
              <el-input v-model="remark" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日">
              <el-date-picker
                v-model="birthday"
                type="date"
                placeholder="请选择日期"
                class="pickerClass"
                :clearable="false"
                style="width: 207px;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色关联">
              <el-select v-model="roles" value-key="rId" multiple placeholder="请选择" style="width: 207px;">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.rId"
                  :label="item.rName"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="subAddOrUpdate">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import './index.less'
import indexT from './indexT'

export default indexT
</script>
